<template>
  <div>
    <NavBar  :user="user" @clean:user="user = $event"/>
    <div class="main-container">
      <LeftMenu/>
      <div class="right-content">
        <router-view v-if="route.path==='/member/info'" @reload-info="reloadInfo" :user="user" @goto:page="gotoPage"></router-view>
        <router-view v-else @goto:page="gotoPage"></router-view>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script setup>
import LeftMenu from './LeftMenu.vue'
import Footer from '@views/common/Footer.vue'
import NavBar from '@views/common/NavBar.vue'
import {ref, onMounted} from 'vue'
import {useRouter, useRoute} from "vue-router";
import apis, {IMG_BASE_PATH} from "@/config/api-config.js";
import getResponse from "@assets/js/http-client.js";
import {ElMessage} from "element-plus";

const router = useRouter();
const route = useRoute();
const user = ref({});

/**
 * 刷新用户信息
 */
const reloadInfo = async () => {
  await getUserInfo();
}
onMounted(async () => {
  //获取用户信息
  await getUserInfo();
  if(!user.value||!user.value.id){
    await router.push({path: '/',query: { model: 1 }});
  }
});
const  gotoPage = (path) => {
  router.push({path});
}
const getUserInfo = async () => {
  let token = localStorage.getItem('wemall-token');
  if (token === null) {
    return;
  }
  //如果有token,说明已登录过系统,则根据token获取用户数据
  let url = apis.member.getInfo.url;
  let type = apis.member.getInfo.type;
  //token参数已统一处理,无需再手动添加
  const result = await getResponse(url, type);
  if (200 !== result.code) {
    console.error(result.message)
    return;
  }
  //console.info('获取用户信息成功:', result.data);
  user.value = result.data;
  let avatar = user.value.avatar;
  if (!avatar) {
    user.value.avatar = 'src/assets/img/member/user_center.png';
  } else {
    user.value.avatar = IMG_BASE_PATH + avatar;
  }
}
</script>

<style scoped>
/* 主容器样式 */
.main-container {
  display: flex;
  margin: 20px auto;
  min-height: calc(100vh - 160px);
}

/* 右侧内容区域样式 */
.right-content {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 垂直滚动 */
  overflow-x: hidden; /* 禁止水平滚动 */
  padding: 20px;
}
</style>